<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" href="jquery-ui-1.8.16.custom/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jqueryui.js"></script>
		<script type="text/javascript">
			var x=$(document);
			x.ready(inicio);
			
			function inicio(){
				var div = $(".capa");
				div.dblclick(EstablecerDatos);	
								
				div.resizable();
				div.draggable();
							
				}
												
			function AgregarDiv(){				
				$("#contentUsuario").append("<div class='capa' height='200' width='200'></div>");
				inicio();
					}
				
			function ExportarHTML(){
					var x = $("#txtOculto_HTML");
					var contenido = $("#contentUsuario");
					x.val("<html> <head> <title>Problema</title> <style> div{border:dotted #0066FF;}</style> </head> <body>"+contenido.html()+"</body> </html>");
					var variables = $.get("site")+ "%" +$.get("page");
					
					$("#txtOculto_IDSITIO").val(variables);
					$("#form").submit();
					
					
                   						}
					
					
			function EstablecerDatos(){
				var me = $(this);
				me.html("");		
				var posicion =  me.offset();
				var elemento = "<p>" +posicion.left +" x "+posicion.top +" <br> Alto = "+me.height() +"Ancho = "+me.width();
				me.append(elemento);
			}
			
			(function($) {  
    $.get = function(key)   {  
        key = key.replace(/[\[]/, '\\[');  
        key = key.replace(/[\]]/, '\\]');  
        var pattern = "[\\?&]" + key + "=([^&#]*)";  
        var regex = new RegExp(pattern);  
        var url = unescape(window.location.href);  
        var results = regex.exec(url);  
        if (results === null) {  
            return null;  
        } else {  
            return results[1];  
        }  
    }  
})(jQuery);  
		</script>
	
		<style type="text/css">
		#contentUsuario{
			width:100%;
			height:614px;
			border:solid #999;
			background-color:#FFF;

			}
		.capa{
				width:200px;
				height:200px;
				border:dotted #0066FF;
				background:#E0E0F8;
				text-align:center;
				
			}
		#page{
				background-image:url(fondo.jpg);}
				
		#Herramientas{

			}
		</style>	
	</head>
	<body id="page">
   
        <div id="Herramientas">
        <form id="form" method="post" action="GuardarTXT.php">
        <input type="hidden" id="txtOculto_HTML" name="txtHiddenHTML">
        <input type="hidden" id="txtOculto_IDSITIO" name="txtHiddenID" value="">
        <input type="button"id="BTNAgregar" onClick="AgregarDiv()" value="Add DIV" >
        <input type="button"id="BTNGuardar" onClick="ExportarHTML()" value="Guardar" >
        </form>
   
    	<div id="contentUsuario">
    
    	
		</div>
	</body>
</html>

